<template>
  <div class="myBox">
      <header>
        <div class="store-name">个人中心</div>
      </header>
      <main>
        <div class="myMsg">
          <div class="a">
            <img :src="'http://10.7.162.81:15666/' + msg.photo" alt="">
            <div>
              <span>{{ msg.name }}</span>
              <br>
              <small>普通用户</small>
            </div>
          </div>
          <div class="b">
            <div>
              <van-icon name="map-marked" />  {{ msg.address }}
            </div>
            <div>
              <van-icon name="phone" /> {{ msg.phone }}
            </div>
            <div>
              <van-icon name="manager" /> {{ msg.sex }}
            </div>
            <div>
              <van-icon name="balance-list" /> {{ msg.email }}
            </div>
          </div>
        </div>
        <div class="edit">
          <van-cell title="我的订单" is-link to="/goods" icon="coupon" />
          <van-cell title="地址管理" is-link to="/address" icon="location" />
          <van-cell title="修改密码" is-link to="/edit" icon="setting" />
          <van-cell title="退出" @click="out" is-link icon="warning" />
        </div>
      </main>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        msg:{}
      }
    },
    created () {
      this.msg = this.$store.getters['common/user']
      if (this.msg.address.indexOf('/') !== -1) {
        this.msg.address = this.msg.address.slice(0, this.msg.address.indexOf('/'))
      }
    },
    methods: {
      out(){
        this.$store.commit('common/mutationToken','')
        this.$store.commit('common/mutationUser','')
        localStorage.removeItem('token')
        this.$router.push("/login");
      }
    }
  }
</script>
<style lang="less" scoped>
  .myBox{
    width: 100%;
    height: calc(100% - 50px);
    overflow-x: hidden;
    background-color: rgb(246,246,246);
    header{
        width: 100%;
        height: 230px;
        padding: 0 20px;
        padding-top: 30px;
        text-align: center;
        background: linear-gradient(rgb(252,105,95) 0%,rgb(246,246,246) 76%);
        .store-name{
            width: 100%;
            height: 50px;
            text-align: center;
            color: #fff;
            font-weight: bold;
        }
    }
    main{
      overflow-x: hidden;
      position: absolute;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      top: 4rem;
      width: 100%;
      height: calc(100% - 19%);
      margin: 0 auto;
      .myMsg{
        height: 200px;
        width: 95%;
        border-radius: 15px;
        background-color: white;
        padding: 10px;
        > .a{
          height: 60%;
          width: 100%;
          display: flex;

          img{
            height: 100px;
            width: 100px;
            border-radius: 50%;
            vertical-align: top;
            margin-right: 15px;
          }
          span{
            font-weight: bold;
            font-size: 1.4rem;
            display: inline-block;
          }
          small{
            color: rgb(235, 153, 31);
          }
        }
        > .b{
          height: 40%;
          display: flex;
          flex-wrap: wrap;
          justify-content: left;
          margin-left: 8px;
          >div{
            width: 50%;
            display: flex;
            align-items: center;
            font-size: .7rem;
            .van-icon{
              margin-right: 4px;
              font-size: .8rem;
            }
          }
        }
      }
      .edit{
        margin-top: 10px;
        width: 95%;
        border-radius: 15px;
        background-color: white;
        padding: 10px;
        margin-bottom: 100px;
        .van-cell{
          font-size: .8rem;
          height: 80px;
          line-height: 60px;
          .van-icon{
            margin-right: 10px;
            font-size: 1.2rem;
            line-height: 60px;
            color: red;
          }
          .van-cell__right-icon{
            font-size: .8rem;
          }
        }
      }
    }
  }
</style>